<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <input type="text" id="keyword">
    <button id="search">搜索</button>
    <hr>
    <div id="warp"></div>

    <script>

        var words = []; //记录历史




        var res =localStorage.getItem("words");
        if (res) {
            words=JSON.parse(res);
            words.forEach(item=>{
                warp.innerHTML+=`<p>${item}</p>`
            })
        }



        search.onclick = function () {
            // 检索输入的数据和历史记录是否一致
            var res = Array.from(warp.children).some(item => {
                return item.innerText == keyword.value;
            })
            // 检索后如果数据在历史记录中不存在res ==false 在存储
            if (!res) {
                warp.innerHTML += `<p>${keyword.value}</p>`;
                words.unshift(keyword.value);
                // 页面刷新
                location.reload()
                localStorage.setItem("words", JSON.stringify(words))
            }

            keyword.value = ""
        }

    </script>
</body>

</html>